import React, { Component, createRef } from 'react'
import axios from 'axios'

import MyBtn from './MyBtn'



export const styles = {
  box: {
    border: '1px solid #ddd',
    borderRadius: 15,
    padding: 15,
    margin: 15,
  }
}

axios.defaults.baseURL = "http://localhost:3000"

export default class TodoListThree extends Component {
  state = {
    comments: []
  }

  // 请求列表
  getComments = async () => {
    const res = await axios.get('/comments')
    this.setState({
      comments: res.data
    })
  }

  componentDidMount() {
    this.getComments()
  }



  // 删除和修改
  changeComments = (comments) => {
    this.setState({
      comments
    })
  }

  // 添加
  addComment = (title, content) => {
    this.state.comments.unshift({
      title,
      content
    })
    this.setState({
      comments: this.state.comments
    })
    this.reseData()
  }

  render() {
    const { comments } = this.state
    return (
      <div>
        <h3>React 留言板</h3>
        <TodoListContent comments={comments} changeComments={this.changeComments}></TodoListContent>
        <TodoListFooter getComments={this.getComments}></TodoListFooter>
      </div >
    )
  }
}

// 留言板主内容组件
class TodoListContent extends Component {

  // 删除
  removeItem = async (item, index) => {
    if (window.confirm('确认删除')) {
      const res = await axios({ url: '/comments/' + item.id, method: 'delete' }) // 先删除后端

      this['item_' + index].classList.add('min-leave-active')
      setTimeout(() => {
        this.props.comments.splice(index, 1)
        this.props.changeComments(this.props.comments)
      }, 1000) // 再删除前端
    }
  }

  // 修改
  updateItem = async (item, index) => {
    const content = window.prompt(item.title, item.content)

    if (content && content !== item.content) {
      const res = await axios({ url: '/comments/' + item.id, method: 'patch', data: { content: content } }) // 先修改后端

      this['item_' + index].classList = 'bounce'
      item.content = content
      this.props.comments.splice(index, 1, item)
      this.props.changeComments(this.props.comments)

      setTimeout(() => {
        this['item_' + index].classList.remove('bounce')
      }, 1000) // 再修改前端
    }
  }

  render() {
    const { comments } = this.props
    return (
      <div style={styles.box}>
        <h4>展示留言</h4>
        <div>
          {
            comments.map((item, index) => {
              return (
                <div className='item min-enter-active' style={{ margin: '15px 0', background: 'orange', borderRadius: 10, padding: 5, animationDelay: 10 * index + 'ms' }} key={item.title} ref={el => this['item_' + index] = el}>
                  <p>序号：{index + 1}</p>
                  <p>标题：{item.title}</p>
                  <p>内容：{item.content}</p>
                  <p>操作:
                    <MyBtn text='删除' onClick={() => this.removeItem(item, index)}></MyBtn>
                    <MyBtn text='修改' onClick={() => this.updateItem(item, index)}></MyBtn>
                  </p>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

// 留言板底部
class TodoListFooter extends Component {
  title = createRef()
  content = createRef()
  // 重置
  reseData = () => {
    this.title.current.value = ''
    this.content.current.value = ''
  }

  // 添加
  addCommentss = async () => {
    const title = this.title.current.value
    const content = this.content.current.value

    if (title && content) {
      // this.props.addComment(title, content)
      const res = await axios.post('/comments', {
        title, content
      })
      this.reseData()
      this.props.getComments()
    } else {
      alert('请输入内容')
    }
  }


  render() {
    return (
      <div style={styles.box}>
        <h3>提交留言</h3>
        <div>
          <p>
            标题：<input type='text' ref={this.title} placeholder='请输入' />
          </p>
          <p>
            内容：<input type='text' ref={this.content} placeholder='请输入' />
          </p>
          <p>
            <MyBtn text='添加' onClick={this.addCommentss}></MyBtn>
            <MyBtn text='重置' onClick={this.reseData}></MyBtn>
          </p>
        </div>
      </div>
    )
  }
}
